<%@ page pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="${ctx}/css/base.css"/>
    <script type="text/javascript" src="/js/widget/bd-map.js"></script>
    <!-- 加载城市列表 -->
    <!--<script type="text/javascript" src="http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js"></script>-->
    <title>叠加麻点图层</title>
    <style type="text/css">
        .map-mod {
            /*height: 600px;*/
            height: 500px;
            /*_height: 300px;*/
            /*height: 100%;*/
            border: 1px solid #b8bec6;
        }

        .map-mod .map {
            width: 100%;
            height: 100%;
        }

        .map-mod .map .map-inner {
            margin-left: 300px;
            height: 100%;
        }

        .map-mod .poi-list {
            width: 290px;
            height: 100%;
            overflow-x: hidden;
            margin-left: -100%;
            padding: 0;
        }

        .poi-meta {
            position: relative;
            padding: 7px 5px 7px 40px;
            font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5FAE\8F6F\96C5\9ED1', '\5b8b\4f53', sans-serif;
            overflow: hidden;
            cursor: pointer;
        }

        .poi-meta:hover {
            background-color: #eee;
        }

        .poi-meta .meta-logo {
            position: absolute;
            margin-top: 3px;
            margin-left: -25px;
            background: url(/img/map-xiu.png) no-repeat;
            width: 19px;
            height: 25px;
            cursor: pointer;
        }

        .poi-meta .meta-hd {
            margin: 0;
            padding: 0;
            line-height: 20px;
            font-size: 1.1em;
            font-style: normal;
            font-weight: 500;
        }

        .poi-meta .meta-prop span {
            color: #666;
        }

        .filter {
            margin: 10px 20px;
        }

        .filter select {
            border-radius: 0;
            border: 1px solid #ccc;
            width: 100px;
            height: 25px;
            line-height: 25px;
            margin-right: 20px;
        }
        .filter a {
            display: inline-block;
            background-color: #cbdbef;
            height: 25px;
            line-height: 25px;
            padding: 0 15px;
            color: #000;
            border: 1px solid #cbcbcb;
        }

        .filter a:hover {
            background-color: #cbcbcb;
        }
    </style>
</head>
<body>
<div class="filter">
    <form action="">
        <label>
            属性:
            <select name="type">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </label>
        <label>
            服务状态:
            <select name="status">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </label>
        <label>品牌<select name="" id=""></select></label>
        <a href="javascript:;">搜索</a>
    </form>
</div>
<div class="map-mod cf">
    <div class="map fl">
        <div id="allmap" class="map-inner"></div>
    </div>
    <div class="poi-list fl scrolly">
        <ul id="poi-list">
            <li id="poi-tpl" class="poi-meta" style="display: none;">
                <i class="meta-logo"></i>

                <h3 class="meta-hd">{companyName}</h3>

                <div class="meta-bd">
                    <div class="meta-prop">
                        <b>地址：</b><span>{address}</span>
                    </div>
                    <div class="meta-prop">
                        <b>电话：</b><span>{mobile}</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <p id="info-bd-tpl" style="display:none;width:280px;margin:0;line-height:20px;">
        提供：{services}<br>
        评分：<span>{ratings}</span>分&nbsp;<br>
        满意度:<span>{satisfaction}</span>分&nbsp;<br>
        地址：{address} <br>
        营业时间： {hours}
    </p>
</div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
    var bdMap = BdMap({
        container: 'allmap',
        center: {
            lng: 120.840688,
            lat: 28.72346
        },
        zoom: 12
    });
    (function() {
        $('.filter a').click(function() {
            var me = this,
                $self = $(me),
                $form = $self.closest('form'),
                data = {};

            $.each($form.serializeArray(), function(i, el) {
                data[el.name] = el.value;
            });
            $.extend(bdMap.params, data);
            bdMap.zoom(12);
            bdMap.repaint();
        });
    })();
</script>
